<template>
	<view class="bodybox"  :style="'height:'+(screenHeight+46)+'px;'">
<!-- 			  <div class="logobox" style="margin-top: 130px;">
				  <u-image :showLoading="true" :fade="false" :src="logosrc" radius="0px" width="100px" height="100px"></u-image>
			  </div> -->
			  <view style="width:290px; height: 40px; margin:0 auto;margin-top: 20px;">
				<p>
				
					<span style="font-size: 22px;float: left;color: white;">新用户注册</span>
<!-- 					<span style="font-size: 15px;float: left;line-height:33px;text-indent:34px;" @click="verificationCode">
						使用密码登录
					</span> -->
					<u-icon name="arrow-right"size="11" style="float: left;margin-top: 12px;"></u-icon>
				</p>
			  </view>
			  <view class="a_dl">
			  	<u-form :model="loginform" ref="uForm" :rules="rules">
                    <u-form-item  prop="loginName" class="forma">
                    	<u-input placeholder="请输入用户名" 
                    		prefixIcon="account"
                    		text
                    		:focus="true"
                    		style=""
                    		v-model="loginform.loginName"
                    		class="inputa"
                    		clearable
                    		:adjustPosition="false"
                    	/>  
                    </u-form-item>
					<u-form-item  prop="userPhone" class="forma">
						<u-input placeholder="请输入电话号" 
							prefixIcon="phone"
							prefixIconStyle="color:white;"
							text
							:focus="true"
							color="white"
							v-model="loginform.userPhone"
							class="inputa"
							clearable
							:adjustPosition="false"
						/>  
					</u-form-item>
			  		<u-form-item  prop="userEmail" class="forma">
			  			<u-input placeholder="请输入邮箱" 
							prefixIcon="email"
							prefixIconStyle="color:white;"
							text
							:focus="true"
							color="white"
			  				v-model="loginform.userEmail"
			  				class="inputa"
			  				clearable
							:adjustPosition="false"
			  			/>  
			  		</u-form-item>
			  		<u-form-item  prop="code" class="forma">
						<u-input placeholder="请输入验证码" color="white" v-model="loginform.code" prefixIcon="lock" prefixIconStyle="color:white;" class="inputa">
							<template slot="suffix">
								<u-code
									ref="uCode"
									@change="codeChange"
									seconds="20"
									changeText="X秒重新获取"
								></u-code>
								<u-button
									:disabled="idDisabled"
									@tap="getCode"
									:text="tips"
									type="success"
									size="mini"
									style="background-color: #d7000f;border: none;"
								></u-button>
							</template>
						</u-input>
			  		</u-form-item>
                    <u-form-item  prop="userPassword" class="forma">
                    	<u-input placeholder="请输入密码" 
                    		prefixIcon="lock"
                    		text
                            type="password"
                    		:focus="true"
                    		style=""
                    		v-model="loginform.userPassword"
                    		class="inputa"
                    		clearable
                    		:adjustPosition="false"
                    	/>  
                    </u-form-item>
                    <u-form-item  prop="okuserPassword" class="forma">
                    	<u-input placeholder="请确认密码" 
                    		prefixIcon="lock"
                    		text
                            type="password"
                    		:focus="true"
                    		style=""
                    		v-model="loginform.okuserPassword"
                    		class="inputa"
                    		clearable
                    		:adjustPosition="false"
                    	/>  
                    </u-form-item>
			  		<u-button @click="submit" class="buttona" :disabled="isDisabled" text="注册" ></u-button>
			  	</u-form>
			  </view>
<!-- 			  <view class="endbox">
			  	<p class="pp">
			  		<span>忘记密码？</span>
			  		<span style="float: right;" @click="loginadd">新用户注册</span>
			  	</p>
			  </view> -->
<!-- 			  <view style="width: 290px; margin: 0 auto;position: relative;bottom: -190px;">
			  	<p style="font-size: 8px;width: 290px;">
			  		<u-checkbox activeColor="#d7000f" shape="circle" style="float: left;margin-left: 11px;"></u-checkbox>
			  		<span style="">我已阅读并同意</span>
			  		<span style="color: #d7000f;">《服务协议》</span>
			  		<span>和</span>
			  		<span style="color: #d7000f;">《隐私政策》</span>
			  	</p>
			  </view> -->

	</view>
</template>

<script>
		export default {
			data() {
				return {
					tips: '',   
					passwordIcon:"true",
					logosrc: '../../static/96x96.png',
                    screenHeight: getApp().globalData.screenHeight,
					loginform:{
                        loginName:"",
                        userType:1,
						userEmail:"",
						code:"",
						userPhone:"",
						userPassword:"",
						okuserPassword:""
					},
					// 登录校验
					rules:{
						email:[{
							trigger:['change','blur'],
						}],
                        userName:[{
                        	trigger:['change','blur'],
                        }],
						code:[{
							trigger:['change','blur'],
						}],
                        okuserPassword:[{
                                message:'密码不一致',
                            validator (a,b,c){
                                if(b == this.loginform.userPassword){
                                    return true
                                }else{
                                    return false
                                }
                            },
                        	trigger:['blur'],
                        }]
					},
				}

			},
			methods:{
                submit(){
                    var that = this
                  this.$refs.uForm.validate().then(re =>{
                      
                          uni.request({
                              url:'http://'+that.$host+':'+that.$port+'/clientuser/register',
                              method:'POST',
                              data:that.loginform,
                              success(res) {
                                  if(res.flag){
                                      uni.$u.toast('注册成功');
                                      setTimeout(function(){
                                          
                                      uni.navigateBack()
                                      },1000)
                                  }
                              }
                            })
                  }).catch(re =>{  
                          uni.$u.toast('校验失败');
                  })
                },
				// 跳转到邮箱密码登录
				// verificationCode(){
				// 	uni.navigateTo({
				// 	  url:'/pages/login/applogin'
				// 	})
				// },
				// 跳转到新用户注册
				// loginadd(){
				// 	uni.navigateTo({
				// 	  url:'/pages/login/apploginadd'
				// 	})
				// },
				codeChange(text) {
				  this.tips = text;
				},
				getCode() {
                    var that = this
				  if (this.$refs.uCode.canGetCode) {
				    // 模拟向后端请求验证码
				    uni.showLoading({
				      title: '正在获取验证码'
				    })
                    uni.request({
                        url:'http://'+that.$host+':'+that.$port+'/clientuser/sendQQMail?userEmail='+that.loginform.userEmail+'&type=0',
                        success(res) {
                            if(res.data.flag){
                                
                            // 这里此提示会被this.start()方法中的提示覆盖
                            uni.$u.toast('验证码已发送');
                            // 通知验证码组件内部开始倒计时
                            this.$refs.uCode.start();
                            }else{
                                uni.hideLoading();
                                uni.$u.toast('该邮箱已注册');
                            }
                        }
                    })
				   
				  } else {
				    uni.$u.toast('请稍后再发送');
				  }
				},
			},
			mounted() {
				// 页面加载给.a_dl属性的div 附着 slide-up的动画效果
				
			},
			computed: {
				// 监测邮箱输入框 和 验证码输入框 是否有值 有值button解锁 无值禁用button
				isDisabled() {
				  return this.loginform.email === '' || this.loginform.code === ''|| this.loginform.loginName === ''|| this.loginform.userPhone === ''|| this.loginform.userPassword === ''|| this.loginform.okuserPassword === ''
				},
				// 监测邮箱输入框 是否有值 有值获取验证码解锁 无值禁用
				idDisabled(){
				  return this.loginform.email === ''
				}
			}
		}
</script>

<style scoped>
	.bodybox{
		margin: 0;
		padding: 0.1px;
		/* background-image: url("../../static/apbg2.jpg"); */
		/* background: linear-gradient(to bottom right, red, white)no-repeat; */
	    /* background: linear-gradient(40deg,#d7000f,white); */
          background: linear-gradient(1501deg, #f37f8a,#d7000f,#ee6d85);
	    background-size: 400% 400%;
		animation: page 5s ease infinite;
	    backdrop-filter: blur(10px);
	    height: 100%; 
	}
	@keyframes page{
			0% {
				background-position: 0% 50%;
			}
			50% {
				background-position : 100% 50%;
			}
			100% {
				background-position: 0% 50%;
			}  
	}
	.logobox{
		width: 100px;
		height: 100px;
		/* background-color: rebeccapurple; */
		margin: 0 auto;
	}
	.a_dl{
		width: 290px;
		height: 195px;
		/* background-color: rebeccapurple; */
		margin: 0px auto;
		/* margin-top: 100px; */
	}
	.endbox{
		width: 290px;
		/* background: red; */
		margin: 0 auto;
	}
	.inputa{
		border: none;
		/* background-color: yellow; */
		border-bottom: 2px solid white !important;
	}
	.buttona{
		color: ##d7000f;
		background-color: white;
		/* border-radius: 20px; */
		margin-top: 15px;
	}
	.forma{
		height: 65px;
		/* background-color: yellow; */
	}
	.u-form-item /deep/ .u-form-item__body__right__message{
		position: relative;
		left: -35px;
		text-align: left;
	}
	.slide-up {
		animation: slide-up 0.5s ease-in-out forwards;
	}
	@keyframes slide-up {
	  to {
		width: 290px;
	  }
	}
	.pp span{
		font-size: 14px;
		/* color: #ABADAE; */
		color: black;
	}
</style>